<template>
  <view class="container">
    <sc-navbar back title="骨板组补货管理"></sc-navbar>
    <glo-gutter>
      <glo-search v-model="listData.params.commonSerchName" placeholder="按骨板组名称/编码/厂家/仓库搜索" show-filter show-scan
        @filter="showSidebar = true" @scan="handlerScan" @search="getList"></glo-search>
      <glo-chunk v-for="(v1, i1) in listData.list" :key="i1">
        <glo-title :title="v1.bonePlateGroupName"></glo-title>
        <sc-flex>
          <sc-text :text="`骨板组条码：${v1.bonePlateGroupBarcode}`" color="#767676" size="19"></sc-text>
        </sc-flex>
        <sc-grid padding="19rpx 0" row="auto" row-gap="19">
          <glo-chunk v-for="(v2, i2) in v1.boardBarcodeRespVOList" :key="i2" padding="10rpx 15rpx 7rpx 19rpx" shadow>
            <sc-grid ai="center" col="auto 1fr auto" col-gap="33" @click="goReplenish(v1, v2)">
              <sc-image :src="v2.boardImageAddress" height="150" width="150"></sc-image>
              <sc-flex direction="t">
                <glo-title :title="`骨板组${uni.$utils.padZero(i2 + 1)}`"></glo-title>
                <glo-info :info="getInfo(v2)"></glo-info>
              </sc-flex>
              <sc-view height="100%">
                <sc-flex ai="center">
                  <sc-image height="38" src="/static/imgs/ic_bu.png" width="38"></sc-image>
                  <sc-icon color="primary" name="arrow-right" size="20"></sc-icon>
                </sc-flex>
              </sc-view>
            </sc-grid>
          </glo-chunk>
        </sc-grid>
        <glo-statistics :statistics="getStatistics(v1)"></glo-statistics>
      </glo-chunk>
    </glo-gutter>
    <glo-sidebar-filter v-model:params="listData.params" v-model:show="showSidebar" :layout="sidebarLayout"
      @filter="getList" @reset="handleReset"></glo-sidebar-filter>
  </view>
</template>

<script setup>
import { useTemporaryStore } from "@/store/temporary.js";
const showSidebar = ref(false);
const sidebarLayout = ref([
  {
    type: "input",
    placeholder: "请输入内容",
    key: "bonePlateGroupName",
    label: "骨板组名称",
  },
  {
    type: "input",
    placeholder: "请输入内容",
    key: "bonePlateGroupCode",
    label: "骨板组编码",
  },
  {
    type: "scan",
    placeholder: "请输入内容",
    key: "bonePlateGroupBarcode",
    label: "条码",
  },
  {
    type: "select",
    placeholder: "请选择内容",
    key: "manufacturerName",
    label: "厂家",
  },
]);
const getInfo = (val) => [
  {
    type: "single",
    label: "序号",
    value: val.serialNumber,
  },
  {
    type: "single",
    label: "编码",
    value: val.boardCode,
  },
  {
    type: "multiple",
    columns: "1fr 1fr",
    list: [
      {
        type: "single",
        label: "所含数量",
        value: val.containCount,
      },
      {
        type: "single",
        label: "剩余数量",
        value: val.remainingCount,
      },
    ],
  },
];
const getStatistics = (val) => [
  {
    name: "所含总数",
    value: val.containCount,
  },
  {
    name: "剩余数量",
    value: val.remainingCount,
  },
];

const listData = reactive({
  params: {
    pageNo: 1,
    pageSize: 10,
    bonePlateGroupName: undefined,
    bonePlateGroupCode: undefined,
    bonePlateGroupBarcode: undefined,
    manufacturerName: undefined,
    commonSerchName: undefined,
  },
  list: [],
  total: 0,
});
const getList = () => {
  _api.getGuBanZuStockList(listData.params).then((res) => {
    listData.list = res.list;
    listData.total = res.total;
  });
};
getList();

/**
 * 重置
 */
const handleReset = () => {
  listData.params.pageNo = 1;
  getList();
};

/**
 * 扫描
 */
const handlerScan = () => {
  console.log("🚀 handlerScan: ");
};
/**
 * 跳转补货操作页面
 */
const goReplenish = (v1, v2) => {
  useTemporaryStore().setReplenish({
    bonePlateGroupCode: v1.bonePlateGroupCode,
    boardCode: v2.boardCode,
    productDataType: 2,
  });
  uni.navigateTo({
    url: `/subPublic/pages/replenishOperation`,
  });
};
</script>
<style lang="scss">
page {
  background: $color-bg;
}
</style>
<style lang="scss" scoped>
.item {
  padding: 17rpx 25rpx 32rpx;
  width: 100%;
  border-radius: 15rpx;
  background: #ffffff;

  .item-info {
    color: #767676;
    font-weight: 400;
    font-size: 19rpx;
    line-height: 26rpx;
  }
}
</style>
